<clr-modal [(clrModalOpen)]="opened" [clrModalClosable]="false">
    <h3 class="modal-title">{{'APP_ENABLE'|translate}}{{"APP_TOOLS"|translate}}</h3>
    <div class="modal-body modal-height">
        <form clrForm #itemForm='ngForm'>
            <div *ngIf="item.name === 'chartmuseum'">
                <clr-toggle-container>
                    <clr-toggle-wrapper>
                        <label>{{"APP_ENABLE"|translate}}{{"APP_STORAGE"|translate}}</label>
                        <input type="checkbox" clrToggle name="pv" [(ngModel)]="item.vars['persistence.enabled']"/>
                    </clr-toggle-wrapper>
                </clr-toggle-container>
                <clr-input-container *ngIf="item.vars['persistence.enabled']">
                    <label>{{"APP_SIZE"|translate}}(Gi)</label>
                    <input type="number" size="34" clrInput name="size"
                           [(ngModel)]="item.vars['persistence.size']"/>
                </clr-input-container>

                <clr-select-container *ngIf="item.vars['persistence.enabled']">
                    <label>{{"APP_STORAGE_CLASS"|translate}}</label>
                    <select clrSelect name="sc" [(ngModel)]="item.vars['persistence.storageClass']" required>
                        <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                        <option *ngFor="let sc of storageClazz" [value]="sc.metadata.name">{{sc.metadata.name}}</option>
                    </select>
                </clr-select-container>
            </div>
            <div *ngIf="item.name === 'prometheus'">
                <clr-input-container>
                    <label>{{"APP_DATA"|translate}}{{"APP_RETENTION"|translate}}({{"APP_DAY"|translate}})</label>
                    <input clrInput name="retention" type="number"
                           [(ngModel)]="item.vars['server.retention']" size="34"/>
                </clr-input-container>
                <clr-toggle-container>
                    <clr-toggle-wrapper>
                        <input type="checkbox" clrToggle name="pv"
                               [(ngModel)]="item.vars['server.persistentVolume.enabled']"/>
                        <label>{{"APP_ENABLE"|translate}}{{"APP_STORAGE"|translate}}</label>
                    </clr-toggle-wrapper>
                </clr-toggle-container>
                <clr-input-container *ngIf="item.vars['server.persistentVolume.enabled']">
                    <label>{{"APP_SIZE"|translate}}(Gi)</label>
                    <input clrInput name="size"
                           [(ngModel)]="item.vars['server.persistentVolume.size']" type="number" size="34"/>
                </clr-input-container>
                <clr-select-container *ngIf="item.vars['server.persistentVolume.enabled']">
                    <label>{{"APP_STORAGE_CLASS"|translate}}</label>
                    <select clrSelect name="sc" [(ngModel)]="item.vars['server.persistentVolume.storageClass']"
                            required>
                        <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                        <option *ngFor="let sc of storageClazz" [value]="sc.metadata.name">{{sc.metadata.name}}</option>
                    </select>
                </clr-select-container>
            </div>
            <div *ngIf="item.name === 'efk'">
                <clr-toggle-container>
                    <clr-toggle-wrapper>
                        <input type="checkbox" clrToggle name="pv"
                               [(ngModel)]="item.vars['elasticsearch.persistence.enabled']"/>
                        <label>{{"APP_ENABLE"|translate}}{{"APP_STORAGE"|translate}}</label>
                    </clr-toggle-wrapper>
                </clr-toggle-container>
                <clr-input-container *ngIf="item.vars['elasticsearch.persistence.enabled']">
                    <label>{{"APP_SIZE"|translate}}(Gi)</label>
                    <input clrInput name="size"
                           [(ngModel)]="item.vars['elasticsearch.volumeClaimTemplate.resources.requests.storage']"
                           type="number"
                           size="34"/>
                </clr-input-container>
                <clr-select-container *ngIf="item.vars['elasticsearch.persistence.enabled']">
                    <label>{{"APP_STORAGE_CLASS"|translate}}</label>
                    <select clrSelect name="sc"
                            [(ngModel)]="item.vars['elasticsearch.volumeClaimTemplate.storageClassName']"
                            required>
                        <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                        <option *ngFor="let sc of storageClazz" [value]="sc.metadata.name">{{sc.metadata.name}}</option>
                    </select>
                </clr-select-container>
            </div>

            <div *ngIf="item.name === 'registry'">
                <clr-toggle-container>
                    <clr-toggle-wrapper>
                        <input type="checkbox" clrToggle name="pv"
                               [(ngModel)]="item.vars['persistence.enabled']"/>
                        <label>{{"APP_ENABLE"|translate}}{{"APP_STORAGE"|translate}}</label>
                    </clr-toggle-wrapper>
                </clr-toggle-container>

                <clr-input-container *ngIf="item.vars['persistence.enabled']">
                    <label>{{"APP_SIZE"|translate}}(Gi)</label>
                    <input type="number" size="34" clrInput name="size"
                           [(ngModel)]="item.vars['persistence.size']"/>
                </clr-input-container>

                <clr-select-container *ngIf="item.vars['persistence.enabled']">
                    <label>{{"APP_STORAGE_CLASS"|translate}}</label>
                    <select clrSelect name="sc"
                            [(ngModel)]="item.vars['persistence.storageClass']"
                            required>
                        <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                        <option *ngFor="let sc of storageClazz" [value]="sc.metadata.name">{{sc.metadata.name}}</option>
                    </select>
                </clr-select-container>
            </div>

            <div *ngIf="item.name === 'kubeapps'">
                <clr-toggle-container>
                    <clr-toggle-wrapper>
                        <input type="checkbox" clrToggle name="pv"
                               [(ngModel)]="item.vars['postgresql.persistence.enabled']"/>
                        <label>{{"APP_ENABLE"|translate}}{{"APP_STORAGE"|translate}}</label>
                    </clr-toggle-wrapper>
                </clr-toggle-container>
                <clr-select-container *ngIf="item.vars['postgresql.persistence.enabled']">
                    <label>{{"APP_STORAGE_CLASS"|translate}}</label>
                    <select clrSelect name="sc"
                            [(ngModel)]="item.vars['global.storageClass']"
                            required>
                        <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                        <option *ngFor="let sc of storageClazz" [value]="sc.metadata.name">{{sc.metadata.name}}</option>
                    </select>
                </clr-select-container>
                <clr-input-container *ngIf="item.vars['postgresql.persistence.enabled']">
                    <label>{{"APP_SIZE"|translate}}(Gi)</label>
                    <input clrInput name="size"
                           [(ngModel)]="item.vars['postgresql.persistence.size']" type="number" size="34"/>
                </clr-input-container>
            </div>

        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline" (click)="onCancel()">{{'APP_CANCEL'|translate}}</button>
        <button type="button" class="btn btn-primary" (click)="onSubmit()"
                [disabled]="isSubmitGoing||itemForm.invalid">{{'APP_COMMIT'|translate}}</button>
    </div>
</clr-modal>
